{extend name="common/application" /}
{block name="title"}<title id="title">交易市场</title>{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="_CSS_/service.css"/>
<link rel="stylesheet" type="text/css" href="_CSS_/reset.css">
<link rel="stylesheet" type="text/css" href="_CSS_/common.css">
<link rel="stylesheet" type="text/css" href="_CSS_/slide.css">
<!--[if lt IE 9]>
<script src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->
<style>
.leftCon{min-height:976px;}
.nodatas{text-align:center;padding:50px 0 100px 0;}
.nodatas img{margin:100px 0 50px 0;}
.serviceList{margin-top: 13px;}   
.blue_font{color: #3377c1;}
.blue_font:hover{color: #3377c1;}
</style>
{/block}



{block name="navbar"}{include file="/common/navbar" /}{/block}
{block name="content"}
<!-- 主体内容 -->
<div class="main">
    <div class="mainBody normalBox clearfix" style="padding-top: 14px;">
        <!--筛选条件-->
        <input type="hidden" id="category">
        <input type="hidden" id="value">
        <input type="hidden" id="c_id">
        <div class="sortItem normalBox">
            <div class="sorts">
                <label class="fl">服务分类：</label>
                <div class="serviceSort fl">
                    <div class="serviceBox mains fl" value="1">
                        <a class="mainSort main-trading" href="javascript:;" all="0">
                            <span class="icons icon-unchecked hide"></span>
                            <span class="icons icon-checked hide"></span>
                            全部
                        </a>

                        <a class="mainSort main-trading" href="javascript:;" all="15">
                            <span class="icons icon-unchecked hide"></span>
                            <span class="icons icon-checked hide"></span>
                            实用
                        </a>
                        <a class="mainSort main-trading" href="javascript:;" all="16">
                            <span class="icons icon-unchecked hide"></span>
                            <span class="icons icon-checked hide"></span>
                            发明
                        </a>
                        <a class="mainSort main-trading" href="javascript:;" all="17">
                            <span class="icons icon-unchecked hide"></span>
                            <span class="icons icon-checked hide"></span>
                            外观
                        </a>
                    </div>
                </div>
            </div>
            <div class="sorts" style="border-top: 0;">
                <label class="fl">交易方式：</label>
                <div class="serviceSort fl">
                    <div class="serviceBox fl" value="2">
                        <a class="mainSort main-cid blue_font" href="javascript:;" id="0">
                            <span class="icons icon-unchecked hide"></span>
                            <span class="icons icon-checked hide"></span>
                            全部
                        </a>

                        <a class="mainSort main-cid" href="javascript:;" id="1">
                            <span class="icons icon-unchecked hide"></span>
                            <span class="icons icon-checked hide"></span>
                            转让
                        </a>
                        <a class="mainSort main-cid" href="javascript:;" id="2">
                            <span class="icons icon-unchecked hide"></span>
                            <span class="icons icon-checked hide"></span>
                            独占许可
                        </a>
                        <a class="mainSort main-cid" href="javascript:;" id="3">
                            <span class="icons icon-unchecked hide"></span>
                            <span class="icons icon-checked hide"></span>
                            排他许可
                        </a>
                        <a class="mainSort main-cid" href="javascript:;" id="4">
                            <span class="icons icon-unchecked hide"></span>
                            <span class="icons icon-checked hide"></span>
                            分许可
                        </a>
                        <a class="mainSort main-cid" href="javascript:;" id="10">
                            <span class="icons icon-unchecked hide"></span>
                            <span class="icons icon-checked hide"></span>
                            普通许可
                        </a>
                    </div>
                </div>
            </div>

        </div>
        <!--服务列表-->
        <div class="serviceList sectionArea normalBox" style="margin-top:13px;">
            <div class="leftCon">
                <div class="serviceHeader">
                    <div class="serviceNavi fl">
                        <a class="sortType active" value="0" href="javascript:;">综合排序</a>
                        <a class="sortType" value="1" href="javascript:;">授权量</a>
                        <a class="sortType" value="3" href="javascript:;">时间</a>
                    </div>
                    <div class="priceRange fl">
                        <a class="showDiv fl" href="javascript:;">价格<span class="icons icon-arrowdown"></span></a>
                        <input class="minPrice" type="number" placeholder="￥"/>
                        <span class="fl">-</span>
                        <input class="maxPrice" type="number" placeholder="￥"/>
                        <div class="hideBox sortBox">
                            <a class="asc cur" href="javascript:;">按价格从低到高</a>
                            <a class="desc" href="javascript:;">按价格从高到低</a>
                        </div>
                        <a class="sendButton" href="javascript:;">确定</a>
                    </div>
                    <div class="total fr">
                        <p class="mr20">共<span class="num" id="count"></span>件商品</p>
                        <a class="prev" href="javascript:;">
                            <span class="icons icon-prev hide"></span>
                            <span class="icons icon-grey-prev"></span>
                        </a>
                        <p><span class="currentPage">1</span>/<span class="allPage"></span></p>
                        <a class="next" href="javascript:;">
                            <span class="icons icon-next"></span>
                            <span class="icons icon-grey-next hide"></span>
                        </a>
                    </div>
                </div>
                <div class="serviceArea">
                    <!--查询不出数据-->
                    <!--<div class="nodatas normalBox hide">-->
                    <!--<img src="images/nodata.png"/>-->
                    <!--<p>抱歉，找不到相关数据</p>-->
                    <!--</div>-->
                    <!--<div class="serviceItem">-->
                    <!--<a class="goDetails" href="trade_details.html"><img src="images/7.png"/></a>-->
                    <!--<div class="serviceCon">-->
                    <!--<span class="prices">￥20000.00起</span>-->
                    <!--<a class="serviceTitle moreline" limit="18" href="trade_details.html">采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保</a>-->
                    <!--<a class="company text_overflow" href="store_details.html" title='武汉河山金堂专利事务所武汉河山金堂专利事务所'>武汉河山金堂专利事务所武汉河山金堂专利事务所</a>-->
                    <!--<p class="volume">授权量<span class="volumeNum">10</span>笔</p>-->
                    <!--<p class="assess">评分<span class="assessNum">4.6</span></p>-->
                    <!--</div>-->
                    <!--</div>-->


                </div>
                <!--分页-->
                <div id="page"></div>
                <!--<div class="pagination" id="pagination">-->
                <!--<a href="javascript:;" class="page-prev">-->
                <!--<span class="icons icon-backward"></span>-->
                <!--</a>-->
                <!--<a href="javascript:;" class="current">1</a>-->
                <!--<a href="javascript:;">2</a>-->
                <!--<a href="javascript:;">3</a>-->
                <!--<a href="javascript:;">4</a>-->
                <!--<a href="javascript:;">5</a>-->
                <!--<a href="javascript:;" class="more" style="background:#f3f3f3 !important;">...</a>-->
                <!--<a href="javascript:;">13</a>-->
                <!--<a href="javascript:;" class="page-next">-->
                <!--<span class="icons icon-forward"></span>-->
                <!--</a>-->
                <!--</div>-->
            </div>
            <div class="rightCon">
                <div class="recommendArea trades">
                    <div class="recommendHeader">
                        <span class="fl">推荐交易</span>
                        <a class="refreshBtn fr" href="javascript:;"><span class="icons icon-refresh"></span></a>
                    </div>
                    <div class="recommendCon">
                        <!--<div class="items">-->
                        <!--<a class="links" href="trade_details.html">-->
                        <!--<img src="images/4.png" alt="采用门型吊架来压紧焦炉保"/>-->
                        <!--</a>-->
                        <!--<div class="borderLine">-->
                        <!--<span class="prices">￥20000.00起</span>-->
                        <!--<a class="itemsTitle text_overflow" href="trade_details.html" title="采用门型吊架来压紧焦炉保">采用门型吊架来压紧焦炉保</a>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--<div class="items">-->
                        <!--<a class="links" href="trade_details.html">-->
                        <!--<img src="images/4.png" alt="采用门型吊架来压紧焦炉保"/>-->
                        <!--</a>-->
                        <!--<div class="borderLine">-->
                        <!--<span class="prices">￥20000.00起</span>-->
                        <!--<a class="itemsTitle text_overflow" href="trade_details.html"-->
                        <!--title='采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保'>采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保</a>-->
                        <!--</div>-->
                        <!--</div>-->
                    </div>
                </div>
                <div class="recommendArea services mt20">
                    <div class="recommendHeader">
                        <span class="fl">推荐服务</span>
                        <a class="refreshBtn fr" href="javascript:;"><span class="icons icon-refresh"></span></a>
                    </div>
                    <div class="recommendCon">
                        <!--<div class="items">-->
                        <!--<a class="links" href="service_details.html">-->
                        <!--<img src="images/4.png" alt="采用门型吊架来压紧焦炉保"/>-->
                        <!--</a>-->
                        <!--<div class="borderLine">-->
                        <!--<span class="prices">￥20000.00起</span>-->
                        <!--<a class="itemsTitle text_overflow" href="service_details.html" title="采用门型吊架来压紧焦炉保">采用门型吊架来压紧焦炉保</a>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--<div class="items">-->
                        <!--<a class="links" href="service_details.html">-->
                        <!--<img src="images/4.png" alt="采用门型吊架来压紧焦炉保"/>-->
                        <!--</a>-->
                        <!--<div class="borderLine">-->
                        <!--<span class="prices">￥20000.00起</span>-->
                        <!--<a class="itemsTitle text_overflow" href="service_details.html"-->
                        <!--title='采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保'>采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保采用门型吊架来压紧焦炉保</a>-->
                        <!--</div>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<!-- 脚本引入 -->
<script src="_JS_/trading.js"></script>
<script type="text/javascript" src="_JS_/getDate.js"></script>
<script type="text/javascript" src="_P_/layer/layer.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
		var url = window.location.href;
        var keys = url.split("#")[1];
        if (keys == '' || keys == null || keys == 'undefined') {
            $('.main-trading').eq(0).addClass('blue_font');
        }else if(keys == 15){
            $('.main-trading').eq(1).addClass('blue_font');
        }else if(keys == 16){
            $('.main-trading').eq(2).addClass('blue_font');
        }else{
            $('.main-trading').eq(3).addClass('blue_font');
        }
        /*金额格式化*/
        $('.prices').each(function () {
            var price = $(this).text();
            var price_num = number_format(price, 2, ".", ",");
            $(this).text('￥' + price_num + '起');
        });
    });

    $(function () {
        var category = decodeURI(window.location.href.split("#")[1]);
        if (category == '' || category == null || category == 'undefined') {
            category = 0;
        }
        postfile(1, 0, category);
        hot_view();
        get_view();
    });

    $(".refreshBtn").eq(0).on('click', function () {
        hot_view();
    });
    $(".refreshBtn").eq(1).on('click', function () {
        get_view();
    });
    $('.prev').on('click', function () {
        var value = $("#value").val();
        var category = $("#category").val();
        var c_id = $("#c_id").val();
        var prev_num = parseInt($('.currentPage').html()) - 1;
        if (prev_num != 0) {
            postfile(prev_num, c_id, category, value);
        }
    });
    $('.next').on('click', function () {
        var c_id = $("#c_id").val();
        var category = $("#category").val();
        var value = $("#value").val();
        var next_num = parseInt($('.currentPage').html()) + 1;
        var max_num = parseInt($('.allPage').html());
        if (next_num <= max_num) {
            postfile(next_num, c_id, category, value);
        }
    });

    $(".sortType").on('click', function () {
        var value = $(this).attr('value');
        var category = $("#category").val();
        var c_id = $("#c_id").val();
        $("#value").val(value);
        postfile(1, c_id, category, value);
    });

    $(".asc").click(function () {
        var category = $("#category").val();
        var c_id = $("#c_id").val();
        $("#value").val(4);
        postfile(1, c_id, category, 4);
    });
    $(".desc").click(function () {
        var category = $("#category").val();
        var c_id = $("#c_id").val();
        $("#value").val(5);
        postfile(1, c_id, category, 5);
    });

    /**推荐服务*/
    function get_view() {
        $.ajax({
            type: "get",
            url: "{:url('api/service/rand_goods')}",
            data: {'number': 2, 'order': 'rand()'},
            dataType: 'jsonp',
            success: function (msg) {
                var html = "";
                if (msg.code == 200) {
                    for (var i = 0; i < msg.data.length; i++) {
						var price_num = number_format(msg.data[i].price, 2, ".", ",");
                        html += '<div class="items"><a class="links" href="/index.php/index/service/service_details.html?id=' + msg.data[i].id + '">';
                        html += '<img src="/Images/serviceGoods/' + msg.data[i].pic + '" alt="' + msg.data[i].goods_name + '" /></a>';
                        html += '<div class="borderLine">';
                        html += '<span class="prices">￥' + price_num + '</span>';
                        html += '<a class="itemsTitle text_overflow" href="/index.php/index/service/service_details.html?id=' + msg.data[i].id + '" title="' + msg.data[i].goods_name + '"></a>' + msg.data[i].goods_name + '</div></div>';
                    }
                    $('.recommendCon').eq(1).html(html);
                }
            }
        });
    }


    $(".main-trading").on('click', function () {
		$(".main-trading").removeClass('blue_font');
        $(this).addClass('blue_font');
        var category = $(this).attr('all');
        $("#category").val(category);
        var value = $("#value").val();
        var c_id = $("#c_id").val();
        postfile(1, c_id, category, value);
    });

    $(".main-cid").on('click', function () {
		$(".main-cid").removeClass('blue_font');
        $(this).addClass('blue_font');
        var c_id = $(this).attr('id');
        $("#c_id").val(c_id);
        var category = $('#category').val();
        var value = $("#value").val();
        postfile(1, c_id, category, value);
    });

    /**推荐交易服务**/
    function hot_view() {
        $.ajax({
            type: "get",
            url: "{:url('api/trading/trading_rand')}",
            data: {'number': 2, 'order': 'rand()'},
            dataType: 'jsonp',
            success: function (msg) {
                var html = "";
                if (msg.code == 200) {
                    for (var i = 0; i < msg.data.length; i++) {
						var price_num = number_format(msg.data[i].store, 2, ".", ",");
                        html += '<div class="items">' +
                            '<a class="links" href="trade_details.html?id=' + msg.data[i].id + '">' +
                            '<img src="/Images/tradingMarket/' + msg.data[i].image + '"' +
                            ' alt="' + msg.data[i].username + '"/></a><div class="borderLine">' +
                            '<span class="prices">￥' + price_num + '起</span>' +
                            '<a class="itemsTitle text_overflow" href="trade_details.html?id=' + msg.data[i].id + '"' +
                            ' title="' + msg.data[i].username + '">' + msg.data[i].username + '</a></div></div>';
                    }
                    $('.recommendCon').eq(0).html(html);
                }
            }
        });
    }

    $(".sendButton").on('click', function () {
        var category = $("#category").val();
        var c_id = $("#c_id").val();
        var value = $("#value").val();
        postfile(1, c_id, category, value);
    });

	
    function postfile(page, c_id, category, value) {
        var minmoney = $('.minPrice').val();
        var maxmoney = $('.maxPrice').val();
        $.ajax({
                type: 'GET',
                url: "{:url('api/trading/trading_index')}",
                dataType: 'jsonp',
                jsonp: 'callback',
                data: {
                    'page': page,
                    'category_id': category,
                    'c_id': c_id,
                    'value': value,
                    'minmoney': minmoney,
                    'maxmoney': maxmoney
                },
                success: function (msg) {
                    $("div.serviceArea").html("");
                    if (msg.code == 200) {
                        $('.num').html(msg.data.count);
                        $('.currentPage').html(page);
						
						
					
                        var pages = Math.ceil(msg.data.count / 20);
                        $('.allPage').html(pages);
                        var re = /^[0-9]+$/;
                        var html = '';
                        if (msg.data.data.length == 0) {
                            html += '<div class="nodatas"><img src="/static/web/images/nodata.png"/><p>抱歉，找不到相关数据</p></div>'
                        }
                        $("#count").html(msg.data.count);
                        for (var j = 0; j < msg.data.data.length; j++) {
							var title = cut(msg.data.data[j].username,18);
							var price_num = number_format(msg.data.data[j].store, 2, ".", ",");
                            // var src = msg.data.data[j].image ? JSON.parse(msg.data.data[j].image) : "";
                            if (re.test((j + 1) / 5)) {
                                html += '<div class="serviceItem mr0">';
                            } else {
                                html += '<div class="serviceItem">';
                            }
                            html += '<a class="goDetails" href="trade_details.html?id=' + msg.data.data[j].id + '">';
                            html += '<img src="/Images/tradingMarket/' + msg.data.data[j].image + '"/></a>';
                            html += '<div class="serviceCon"><span class="prices">￥' + price_num + '起</span>';
                            html += '<a class="serviceTitle moreline" limit="18" href="trade_details.html?id=' + msg.data.data[j].id + '">' + title + '</a>';
                            html += '<a class="company text_overflow" href="/index.php/index/trade/center.html?' + msg.data.data[j].s_id + '" ' +
                                'title="' + msg.data.data[j].name + '">' + msg.data.data[j].name + '</a>' +
                                '<p class="volume">授权量<span class="volumeNum">' + msg.data.data[j].value + '</span>笔</p>';
                            html += '</div></div>';
                        }
                        $("div.serviceArea").html(html);
                        if (msg.data.data.length == 0) {
                            $('#page').html('');
                        } else {
                            $('#page').html(msg.data.render);
                            $("#pagination a").on("click", function () {
                                var category = $("#category").val();
                                var value = $("#value").val();
                                var num = $(this).attr("num");
                                var c_id = $("#c_id").val();
                                if (num) {
                                    postfile(num, c_id, category, value);
                                }
                            });
							$("#GO").on('click',function(){
								var king = $("#go").val();
								if(king > pages){
									layer.alert("最多输入"+pages+"页");
									return;
								}
								postfile(king, c_id, category, value);
							});
                        }
                    } else {
                        layer.msg('查询失败!', {icon: 1, time: 1000});
                    }
                }
            }
        )
    }
</script>
{/block}
